/**
 * Created by tanbingqin on 2019/7/5.
 */
import { messages } from "share/common";
import React from 'react';
import { connect } from 'react-redux';

import { Form, Switch, Row, Col, Select, Input, Divider, Button, Radio, InputNumber, message, Alert } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
import menuRoute from "routes/menuRoute";
import formService from 'containers/setting/form/form.service'
import errorMessage from 'share/errorMessage';
import configUtil from 'containers/setting/form/form-detail/form-setting/travel-config-util'


class SupplierManagementV2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saveLoading: false, //保存的loading
      isEditing: false, //是否是编辑状态
      manageType: props.data.manageType,//机票行程管控模式
      trainManageType: props.data.trainManageType, //火车行程管控模式
      hotelManageType: props.data.hotelManageType, //酒店行程管控模式
      expiryDateControlValue: false,//有效期管控的值
      costCenterList: [
        {
          key: 'costCenter1',
          title: messages('setting.key680'/*成本中心1*/),
          enabled: false,
          index: null,
          type: null,
          typeName: '', //system 系统字段 fixed 固定值，为固定值时type应该为1001
          value: null,
          valueScope: null,
          valueScopeList: [],
          remark: messages('setting.key1897')/*备注：携程、甄选及美亚特有。*/
        },
        {
          key: 'costCenter2',
          title: messages('setting.key682'/*成本中心2*/),
          enabled: false,
          index: null,
          type: null,
          typeName: '', //system 系统字段 fixed 固定值，为固定值时type应该为1001
          value: null,
          valueScope: null,
          valueScopeList: [],
          remark: messages('setting.key1896')/*备注：携程及甄选特有。*/
        },
        {
          key: 'costCenter3',
          title: messages('setting.key683'/*成本中心3*/),
          enabled: false,
          index: null,
          type: null,
          typeName: '', //system 系统字段 fixed 固定值，为固定值时type应该为1001
          value: null,
          valueScope: null,
          valueScopeList: [],
          remark: messages('setting.key1896')/*备注：携程及甄选特有。*/
        },
        {
          key: 'costCenter4',
          title: messages('setting.key684'/*自定义字段1*/),
          enabled: false,
          index: null,
          type: null,
          typeName: '', //system 系统字段 fixed 固定值，为固定值时type应该为1001
          value: null,
          valueScope: null,
          valueScopeList: [],
          remark: messages('setting.key1896')/*备注：携程及甄选特有。*/
        },
        {
          key: 'costCenter5',
          title: messages('setting.key685'/*自定义字段2*/),
          enabled: false,
          index: null,
          type: null,
          typeName: '', //system 系统字段 fixed 固定值，为固定值时type应该为1001
          value: null,
          valueScope: null,
          valueScopeList: [],
          remark: messages('setting.key1896')/*备注：携程及甄选特有。*/
        },
        {
          key: 'rankName',
          title: messages('setting.key2112')/*职级*/,
          enabled: false,
          index: null,
          type: null,
          typeName: '', //system 系统字段 fixed 固定值，为固定值时type应该为1001
          value: null,
          valueScope: null,
          valueScopeList: [],
          remark: messages('setting.key2113')/*备注：携程特有。配置打开时，请确保携程也维护了相同的职级体系，否则可能导致审批通过后无法使用。*/
        }
      ],
      optionList: [], //固定值加系统字段可选列表
      flightConfigList: [], ////机票包含的字段 操作数据，展示用
      hotelConfigList: [], //酒店包含的字段 操作数据，展示用
      trainConfigList: [], //火车包含的字段 操作数据，展示用
    };
    this.formManagement = menuRoute.getRouteItem('form-list', 'key');
  }

  componentWillMount() {
    const {formOID} = this.props.params;
    formService.getSupplierOptions(formOID).then(res => {
      this.setState({
        optionList: res.data ? res.data : [],
      }, this.initCostField);
    });
    this.initExpiryDate();
    this.initFlight();
    this.initHotel();
    this.initTrain();
  }

  componentWillReceiveProps(nextProps) {
    this.initExpiryDate(nextProps.propertyList);
  }

  //初始化5个字段数据 + rankName字段
  initCostField = () => {
    const { data } = this.props;
    const { costCenterList, optionList } = this.state;
    let costCenterCustom = JSON.parse(JSON.stringify(data.costCenterCustom));
    costCenterList.map((cost, index) => {
      cost.enabled = costCenterCustom[cost.key] ? costCenterCustom[cost.key].enabled : false;
      if (costCenterCustom[cost.key] && (costCenterCustom[cost.key].index || costCenterCustom[cost.key].type)) {
        cost.index = costCenterCustom[cost.key].index;
        cost.type = costCenterCustom[cost.key].type;
        if (cost.type === 1001) {
          cost.typeName = 'fixed';
          cost.value = costCenterCustom[cost.key].value;
          cost.valueScope = null;
          cost.valueScopeList = [];
        } else {
          cost.typeName = 'system';
          if (this.isExistInOptionList(costCenterCustom[cost.key])) {
            //index作为key值，index不一致时，要刷新为最新的index
            cost.index = this.getNewIndex(costCenterCustom[cost.key]);
            cost.value = costCenterCustom[cost.key].value;
            cost.valueScope = costCenterCustom[cost.key].valueScope;
            cost.valueScopeList = this.getValueScopeList(costCenterCustom[cost.key], cost.index);
          } else {
            this.clearCost(cost);
          }
        }
      } else {
        this.clearCost(cost);
      }
    });
    this.setState({costCenterList});
  };

  //获取最新的index
  getNewIndex = (costCenterCustomItem) => {
    const { optionList } = this.state;
    let index = -1;
    optionList.map(option => {
      //index不一致，type一致，说明是表单控件有过变动
      if (costCenterCustomItem.type === option.type) {
        if (costCenterCustomItem.value) {
          if (costCenterCustomItem.value === option.value) {
            index = option.index;
          }
        } else {
          index = option.index;
        }
      }
    });
    return index;
  };

  //检查之前的配置项是否还存在，如果是值列表，事由这样的控件字段，通过value判断控件是否改变
  isExistInOptionList = (costCenterCustomItem) => {
    const { optionList } = this.state;
    let isExist = false;
    optionList.map(option => {
      //index不一致，type一致，说明是表单控件有过变动，此时不影响配置，所以不用判断index是否相等
      if (costCenterCustomItem.type === option.type) {
        if (costCenterCustomItem.value) {
          if (costCenterCustomItem.value === option.value) {
            isExist = true;
          }
        } else {
          isExist = true;
        }
      }
    });
    return isExist;
  };

  //获取对应的valueTypes
  getValueScopeList = (costCenterCustomItem, newIndex) => {
    const { optionList } = this.state;
    let valueScopeList = [];
    optionList.map(option => {
      if (newIndex === option.index && costCenterCustomItem.type === option.type) {
        valueScopeList = JSON.parse(JSON.stringify(option.valueTypes));
      }
    });
    return valueScopeList;
  };

  //初始化机票数据
  initFlight = () => {
    const { profile } = this.props;
    const { controlFieldsFlight } = this.props.data;
    let flightConfigList = configUtil.getFlightConfig();
    flightConfigList.map(field => {
      if (controlFieldsFlight.hasOwnProperty(field.key) && field.type === 'boolean'){
        field.value = controlFieldsFlight[field.key].control;
      }
      //处理int类型
      if (field.key === 'preBookingDays' && controlFieldsFlight.hasOwnProperty('preBookingDays')) {
        field.value = controlFieldsFlight[field.key];
      }
      if ((field.key === 'departDate-floatDays' || field.key === 'departDate-inter-floatDays') && controlFieldsFlight.hasOwnProperty('departBeginDate')) {
        let isInter = field.key === 'departDate-inter-floatDays';
        field.value = configUtil.initFloatDaysNum(profile, 'start', isInter, controlFieldsFlight['departBeginDate'].floatDays, controlFieldsFlight['departBeginDate'].internationalFloatDays);
      }
      if ((field.key === 'returnDate-floatDays' || field.key === 'returnDate-inter-floatDays') && controlFieldsFlight.hasOwnProperty('returnEndDate')) {
        let isInter = field.key === 'returnDate-inter-floatDays';
        field.value = configUtil.initFloatDaysNum(profile, 'end', isInter, controlFieldsFlight['returnEndDate'].floatDays, controlFieldsFlight['returnEndDate'].internationalFloatDays);
      }
    });
    this.setState({flightConfigList});
  };

  //初始化酒店数据
  initHotel = () => {
    const { controlFieldsHotel } = this.props.data;
    let hotelConfigList = configUtil.getHotelConfig();
    hotelConfigList.map(field => {
      if (controlFieldsHotel.hasOwnProperty(field.key) && field.type === 'boolean'){
        field.value = controlFieldsHotel[field.key].control;
      }
      //处理int类型
      if (field.key === 'fromDate-floatDays' && controlFieldsHotel.hasOwnProperty('fromDate')) {
        field.value = controlFieldsHotel['fromDate'].floatDays;
      }
      if (field.key === 'leaveDate-floatDays' && controlFieldsHotel.hasOwnProperty('leaveDate')) {
        field.value = controlFieldsHotel['leaveDate'].floatDays;
      }
    });
    this.setState({hotelConfigList});
  };

  //初始化火车数据
  initTrain = () => {
    const { profile } = this.props;
    const { controlFieldsTrain } = this.props.data;
    let trainConfigList = configUtil.getTrainConfig();
    trainConfigList.map(field => {
      if (controlFieldsTrain.hasOwnProperty(field.key) && field.type === 'boolean'){
        field.value = controlFieldsTrain[field.key].control;
      }
      //处理int类型
      if (field.key === 'departDate-floatDays' && controlFieldsTrain.hasOwnProperty('departBeginDate')) {
        field.value = configUtil.initFloatDaysNum(profile, 'start', false, controlFieldsTrain['departBeginDate'].floatDays);
      }
    });
    this.setState({trainConfigList});
  };

  //清空携程自定义5个字段的项
  clearCost = (cost) => {
    cost.index = null;
    cost.type = null;
    cost.typeName = '';
    cost.value = null;
    cost.valueScope = null;
    cost.valueScopeList = [];
  };

  //切换携程5个字段配置是否开启
  handleChangeListItem = (value, index) => {
    const { costCenterList } = this.state;
    costCenterList[index].enabled = value;
    this.setState({costCenterList});
  };

  //5个字段的第一个下拉框的handleChange
  handleChangeType = (value, index) => {
    const { costCenterList } = this.state;
    if (value === 'fixed') {
      costCenterList[index].typeName = value;
      costCenterList[index].type = 1001;
      costCenterList[index].value = '';
      costCenterList[index].index = 0;
      costCenterList[index].valueScope = null;
      costCenterList[index].valueScopeList = [];
    }
    if (value === 'system') {
      costCenterList[index].typeName = value;
      costCenterList[index].type = null;
      costCenterList[index].value = '';
      costCenterList[index].index = null;
      costCenterList[index].valueScope = null;
      costCenterList[index].valueScopeList = [];
    }
    this.setState({costCenterList});
  };

  //5个字段的第二个下拉框的handleChange
  handleChangeSystemField = (value, option, index) => {
    const { costCenterList } = this.state;
    costCenterList[index].type = option.props['data-item'].type;
    costCenterList[index].index = option.props['data-item'].index;
    costCenterList[index].value = option.props['data-item'].value;
    costCenterList[index].valueScopeList = option.props['data-item'].valueTypes;
    //第三个下拉框只有一个值可选时，默认选中
    if (costCenterList[index].valueScopeList.length === 1) {
      costCenterList[index].valueScope = option.props['data-item'].valueTypes[0].viewValue;
    } else {
      costCenterList[index].valueScope = null;
    }
    this.setState({costCenterList});
  };

  //5个字段的第三个下拉框的handleChange
  handleChangeSystemScope = (value, option, index) => {
    const { costCenterList } = this.state;
    costCenterList[index].valueScope = option.props['data-item'].viewValue;
    this.setState({costCenterList});
  };

  //固定值的文本变更
  changeFixedText = (value, index) => {
    const { costCenterList } = this.state;
    costCenterList[index].value = value;
    this.setState({costCenterList});
  };

  //点击编辑
  editClicked = () => {
    this.setState({isEditing: true});
  };

  //点击取消编辑
  cancelEditing = () => {
    this.setState({isEditing: false});
    //还原数据
    this.initManageTypes();
    this.initExpiryDate();
    this.initCostField();
    this.initFlight();
    this.initHotel();
    this.initTrain();
  };

  initManageTypes = () => {
    const { data } = this.props;
    this.setState({
      manageType: data.manageType,
      trainManageType: data.trainManageType,
      hotelManageType: data.hotelManageType
    });
  };

  initExpiryDate = (propList) => {
    const { propertyList } = this.props;
    let resultList = [];
    if (propertyList && propertyList.length) {
      resultList = propertyList;
    } else {
      resultList = propList || [];
    }
    resultList.map(item => {
      if(item.propertyName === 'ca.travel.deactivatedate.enabled') {
        this.setState({
          expiryDateControlValue: item.propertyValue === true || item.propertyValue === 'true'
        });
      }
    });
  };

  handleChangeFieldValue = (value, key, type) => {
    const { flightConfigList, hotelConfigList, trainConfigList } = this.state;
    if (type === 'flight') {
      flightConfigList.map(field => {
        if (field.key === key) {
          field.value = value;
        }
      });
      this.setState({flightConfigList});
    }
    if (type === 'hotel') {
      hotelConfigList.map(field => {
        if (field.key === key) {
          field.value = value;
        }
      });
      this.setState({hotelConfigList});
    }
    if (type === 'train') {
      trainConfigList.map(field => {
        if (field.key === key) {
          field.value = value;
        }
      });
      this.setState({trainConfigList});
    }
  };

  validateData = () => {
    const { costCenterList, flightConfigList, trainConfigList } = this.state;
    let isError = false; //是否验证不通过
    costCenterList.map(item => {
      if (item.enabled && !isError) {
        if (!item.type || (item.type === 1001 && !item.value) || (item.type !== 1001 && !item.valueScope)) {
          message.error(messages('setting.key182'/*字段名称不能为空*/));
          isError = true;
        }
      }
    });
    //校验天数必填的情况
    flightConfigList.map(config => {
      if (['departDate-floatDays', 'departDate-inter-floatDays', 'returnDate-floatDays', 'returnDate-inter-floatDays'].indexOf(config.key) > -1 &&
        !isError && (config.value === null || config.value === undefined)
      ) {
        message.error(messages('setting.key2114')/*机票浮动天数不能为空*/);
        isError = true;
      }
    });
    trainConfigList.map(config => {
      if (['departDate-floatDays'].indexOf(config.key) > -1 &&
        !isError && (config.value === null || config.value === undefined)
      ) {
        message.error(messages('setting.key2115')/*火车浮动天数不能为空*/);
        isError = true;
      }
    });
    return isError;
  };

  //处理提交的参数数据
  processData = () => {
    const { propertyList, data } = this.props;
    const { costCenterList, flightConfigList, hotelConfigList, trainConfigList, manageType, trainManageType,
      hotelManageType, expiryDateControlValue } = this.state;
    const { airlineBudgetExpenseTypeCode, trainBudgetExpenseTypeCode, urbanBudgetExpenseTypeCode, waterBudgetExpenseTypeCode, offlineHotelBudgetExpenseTypeCode } = data;
    let params = {};
    let costCenterCustom = {};
    costCenterList.map(item => {
      costCenterCustom[item.key] = {};
      costCenterCustom[item.key].enabled = item.enabled;
      costCenterCustom[item.key].index = item.index;
      costCenterCustom[item.key].type = item.type;
      costCenterCustom[item.key].value = item.value;
      costCenterCustom[item.key].valueScope = item.valueScope;
    });
    params.costCenterCustom = JSON.stringify(costCenterCustom);

    //处理机票字段的配置
    let controlFieldsFlight = JSON.parse(JSON.stringify(data.controlFieldsFlight));
    flightConfigList.map(field => {
      if (controlFieldsFlight.hasOwnProperty(field.key) && field.type === 'boolean'){
        controlFieldsFlight[field.key].control = field.value;
      }
      //处理int类型
      if (field.key === 'preBookingDays') {
        controlFieldsFlight[field.key] = field.value || 0;
      }
      if ((field.key === 'departDate-floatDays' || field.key === 'departDate-inter-floatDays') && controlFieldsFlight.hasOwnProperty('departBeginDate')) {
        if (field.key === 'departDate-floatDays') {
          controlFieldsFlight['departBeginDate'].floatDays = field.value;
        }
        if (field.key === 'departDate-inter-floatDays') {
          controlFieldsFlight['departBeginDate'].internationalFloatDays = field.value;
        }
      }
      if ((field.key === 'returnDate-floatDays' || field.key === 'returnDate-inter-floatDays') && controlFieldsFlight.hasOwnProperty('returnEndDate')) {
        if (field.key === 'returnDate-floatDays') {
          controlFieldsFlight['returnEndDate'].floatDays = field.value;
        }
        if (field.key === 'returnDate-inter-floatDays') {
          controlFieldsFlight['returnEndDate'].internationalFloatDays = field.value;
        }
      }
      //处理不存在字段，以后加新字段，如果无特殊逻辑，可在util直接加配置字段
      if (!controlFieldsFlight.hasOwnProperty(field.key) && ['preBookingDays', 'departDate-floatDays', 'departDate-inter-floatDays', 'returnDate-floatDays', 'returnDate-inter-floatDays'].indexOf(field.key) === -1) {
        controlFieldsFlight[field.key] = {
          enable: false,
          control: field.value,
          show: false,
          required: false
        };
      }
    });
    this.processDate(controlFieldsFlight);
    this.processEnable(controlFieldsFlight);
    params.controlFieldsFlight = JSON.stringify(controlFieldsFlight);

    //处理酒店字段的配置
    let controlFieldsHotel = JSON.parse(JSON.stringify(data.controlFieldsHotel));
    hotelConfigList.map(field => {
      if (controlFieldsHotel.hasOwnProperty(field.key) && field.type === 'boolean'){
        controlFieldsHotel[field.key].control = field.value;
      }
      //处理int类型
      if (field.key === 'fromDate-floatDays' && controlFieldsHotel.hasOwnProperty('fromDate')) {
        controlFieldsHotel['fromDate'].floatDays = field.value;
      }
      if (field.key === 'leaveDate-floatDays' && controlFieldsHotel.hasOwnProperty('leaveDate')) {
        controlFieldsHotel['leaveDate'].floatDays = field.value;
      }
      //处理不存在字段，以后加新字段，如果无特殊逻辑，可在util直接加配置字段
      if (!controlFieldsHotel.hasOwnProperty(field.key) && ['fromDate-floatDays', 'leaveDate-floatDays'].indexOf(field.key) === -1) {
        controlFieldsHotel[field.key] = {
          enable: false,
          control: field.value,
          show: false,
          required: false
        };
      }
    });
    this.processEnable(controlFieldsHotel);
    params.controlFieldsHotel = JSON.stringify(controlFieldsHotel);

    //处理火车字段的配置
    let controlFieldsTrain = JSON.parse(JSON.stringify(data.controlFieldsTrain));
    trainConfigList.map(field => {
      if (controlFieldsTrain.hasOwnProperty(field.key) && field.type === 'boolean'){
        controlFieldsTrain[field.key].control = field.value;
      }
      //处理int类型
      if (field.key === 'departDate-floatDays' && controlFieldsTrain.hasOwnProperty('departBeginDate')) {
        controlFieldsTrain['departBeginDate'].floatDays = field.value
      }
      //处理不存在字段，以后加新字段，如果无特殊逻辑，可在util直接加配置字段
      if (!controlFieldsTrain.hasOwnProperty(field.key) && ['departDate-floatDays'].indexOf(field.key) === -1) {
        controlFieldsTrain[field.key] = {
          enable: false,
          control: field.value,
          show: false,
          required: false
        };
      }
    });
    this.processDate(controlFieldsTrain);
    this.processEnable(controlFieldsTrain);
    params.controlFieldsTrain = JSON.stringify(controlFieldsTrain);

    //处理剩余参数
    params.manageType = manageType;
    params.trainManageType = trainManageType;
    params.hotelManageType = hotelManageType;
    params['ca.travel.deactivatedate.enabled'] = expiryDateControlValue;

    //因为和第三个tab共用一个保存接口，所以需要把一些其他配置补上，避免后台重新初始化
    let propertyNameList = [
      'ca.travel.flight.disabled',
      'hotel.itinerary.enable',
      'offline.hotel.itinerary.enable',
      'airline.itinerary.enable',
      'urban.itinerary.enable',
      'water.itinerary.enable',
      'dining.itinerary.enable',
      'ca.travel.train.disabled',
      'ca.travel.other.disabled',
      'travel.allowance.disabled',
      'ca.travel.remark.disabled',
      'didi.itinerary.enable',
      'didi.itinerary.enable.types'
    ];
    propertyList.map(item => {
      if (propertyNameList.indexOf(item.propertyName) > -1) {
        params[item.propertyName] = item.propertyValue;
      }
    });
    params['airlineBudgetExpenseTypeCode'] = airlineBudgetExpenseTypeCode;
    params['trainBudgetExpenseTypeCode'] = trainBudgetExpenseTypeCode;
    params['urbanBudgetExpenseTypeCode'] = urbanBudgetExpenseTypeCode;
    params['waterBudgetExpenseTypeCode'] = waterBudgetExpenseTypeCode;
    params['offlineHotelBudgetExpenseTypeCode'] = offlineHotelBudgetExpenseTypeCode;
    return params;
  };

  //处理日期字段的配置
  processDate = (fields) => {
    if (fields.hasOwnProperty('departEndDate') && fields.hasOwnProperty('departBeginDate')) {
      fields['departEndDate'].enable = fields['departBeginDate'].enable;
      fields['departEndDate'].show = fields['departBeginDate'].show;
      fields['departEndDate'].required = fields['departBeginDate'].required;
      fields['departEndDate'].control = fields['departBeginDate'].control;
    }
    if (fields.hasOwnProperty('returnBeginDate') && fields.hasOwnProperty('returnEndDate')) {
      fields['returnBeginDate'].enable = fields['returnEndDate'].enable;
      fields['returnBeginDate'].show = fields['returnEndDate'].show;
      fields['returnBeginDate'].required = fields['returnEndDate'].required;
      fields['returnBeginDate'].control = fields['returnEndDate'].control;
    }
  };

  //维护enable字段
  processEnable = (fields) => {
    let key = '';
    for (key in fields) {
      if (key !== 'preBookingDays') {
        //有一个为false时enable字段就为false
        if (fields[key].control && fields[key].show && fields[key].required) {
          fields[key].enable = true;
        } else {
          fields[key].enable = false;
        }
      }
    }
  };

  //保存操作
  onSaveClick = () => {
    const { formOID } = this.props.params;
    if (!this.validateData()) {
      let params = this.processData();
      this.setState({saveLoading: true});
      formService.saveSupplierForm(formOID, params).then(res => {
        this.setState({saveLoading: false});
        if(res.status ===  200) {
          message.success(messages('setting.key211'/*保存成功*/));
          this.setState({
            isEditing: false
          });
          this.props.saveHandle(true);
        }else{
          message.error(messages('setting.key212'/*保存失败*/))
        }
      }).catch(err => {
        this.setState({saveLoading: false});
        errorMessage(err.response);
      });
    }
  };

  handleChangeCheckbox = (value, key) => {
    this.setState({[key]: value});
  };

  render() {
    const { costCenterList, optionList, isEditing, flightConfigList, hotelConfigList, trainConfigList, manageType,
      trainManageType, hotelManageType, expiryDateControlValue, saveLoading } = this.state;
    const { disabled: hiding } = this.props;
    return (
      <div className="form-setting-supplier-v2">
        <Alert
          className="margin-bottom-20"
          message={messages("common.help")/*帮助提示*/}
          description={messages('setting.key671'/*下方的设置决定了消费商如何对差旅行程管控，若启用相应功能后，汇联易会将相应信息传递给消费商*/)}
          type="info"
          showIcon
        />
        <span className='supplier-module-title'>{messages('setting.key672'/*全局*/)}</span>
        <div className="item-block">
          <div className="title-line">
            {messages('setting.key673'/*行程管控模式*/)}
          </div>
          <Divider dashed/>
          <Row className="title-line">
            <Col span={2}>{messages('setting.key892')/*机票*/}:</Col>
            <Col span={20}>
              <RadioGroup disabled={!isEditing} value={manageType} onChange={e => this.handleChangeCheckbox(e.target.value, 'manageType')}>
                <Radio value={1002}>{messages('setting.key674'/*独立行程*/)}</Radio>
                <Radio value={1001}>{messages('setting.key670'/*合并行程*/)}</Radio>
              </RadioGroup>
            </Col>
          </Row>
          <Row className="title-line">
            <Col span={2}>{messages('setting.key717')/*火车*/}:</Col>
            <Col span={20}>
              <RadioGroup disabled={!isEditing} value={trainManageType} onChange={e => this.handleChangeCheckbox(e.target.value, 'trainManageType')}>
                <Radio value={1002}>{messages('setting.key674'/*独立行程*/)}</Radio>
                <Radio value={1001}>{messages('setting.key670'/*合并行程*/)}</Radio>
              </RadioGroup>
            </Col>
          </Row>
          <Row className="title-line">
            <Col span={2}>{messages('setting.key707')/*酒店*/}:</Col>
            <Col span={20}>
              <RadioGroup disabled={!isEditing} value={hotelManageType} onChange={e => this.handleChangeCheckbox(e.target.value, 'hotelManageType')}>
                <Radio value={1002}>{messages('setting.key674'/*独立行程*/)}</Radio>
                <Radio value={1001}>{messages('setting.key670'/*合并行程*/)}</Radio>
              </RadioGroup>
            </Col>
          </Row>
          <Row className="supplier-remarks">
            <Col span={2}>{messages("common.remark")/*备注*/}</Col>
            <Col span={20}>
              <div>
                {messages('setting.key676'/*[独立行程]严格按照每一段行程的出发城市和到达城市进行管控。*/)}
              </div>
              <div>
                {messages('setting.key2233')/*[合并行程]按申请单中出发城市和到达城市的合集进行管控。*/}
              </div>
              <div>{messages('setting.key2051')/*合并行程目前支持的消费商：*/}</div>
              <ul style={{listStyle: 'none', marginBottom: 0}}>
                <li>{messages('setting.key2052')/*机票：携程、空港嘉华、中旅、甄选*/}</li>
                <li>{messages('setting.key2185')/*酒店：携程、甄选*/}</li>
                <li>{messages('setting.key2186')/*火车：携程、甄选*/}</li>
              </ul>
              <div>{messages('setting.key2055')/*若其他消费商设置为合并行程模式，仍按独立行程模式管控。*/}</div>
            </Col>
          </Row>
        </div>
        <div className="item-block">
          <div className="title-line">
            {messages('setting.key678'/*有效期管控*/)}:
          </div>
          <Divider dashed/>
          <RadioGroup
            disabled={!isEditing}
            value={expiryDateControlValue}
            onChange={e => this.handleChangeCheckbox(e.target.value, 'expiryDateControlValue')}
          >
            <Radio value={true}>{messages("common.yes")/*是*/}</Radio>
            <Radio value={false}>{messages("common.no")/*否*/}</Radio>
          </RadioGroup>
          <div className="supplier-remarks">
            {messages('setting.key1896')/*备注：携程及甄选特有。*/}
          </div>
        </div>
        {costCenterList.map((item, costCenterIndex) => {
          return (
            <div key={item.key} className="item-block">
              <div className="title-line">
                {item.title}:
                <Switch className="margin-left-20" checked={item.enabled} disabled={!isEditing} onChange={(e) => this.handleChangeListItem(e, costCenterIndex)}/>
              </div>
              <Divider dashed/>
              <Row>
                <Col span={7}>
                  <Select
                    style={{width:  '100%'}}
                    value={item.typeName ? item.typeName : undefined}
                    disabled={!isEditing || !item.enabled}
                    placeholder={messages("common.please.select")/*请选择*/}
                    getPopupContainer={triggerNode => triggerNode.parentNode}
                    onSelect={value => this.handleChangeType(value, costCenterIndex)}
                  >
                    <Option value="fixed">{messages('setting.key668'/*固定值*/)}</Option>
                    <Option value="system">{messages('setting.key669'/*系统字段*/)}</Option>
                  </Select>
                </Col>
                {/* type不能作为key，不是唯一性的 */}
                {!!item.typeName && item.type !== 1001 && (
                  <Col span={7} offset={1}>
                    <Select
                      style={{width:  '100%'}}
                      value={item.index ? item.index : undefined}
                      disabled={!isEditing || !item.enabled}
                      placeholder={messages("common.please.select")/*请选择*/}
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                      onSelect={(value, option) => this.handleChangeSystemField(value, option, costCenterIndex)}
                    >
                      {optionList.map(optionItem => {
                        //1001 固定值 1013 rankName专用
                        if (item.key === 'rankName') {
                          return optionItem.type === 1013 && <Option data-item={optionItem} value={optionItem.index}>{optionItem.show}</Option>
                        } else {
                          return optionItem.type !== 1001 && optionItem.type !== 1013 && <Option data-item={optionItem} value={optionItem.index}>{optionItem.show}</Option>
                        }
                      })}
                    </Select>
                  </Col>
                )}
                {!!item.typeName && item.type !== 1001 && (
                  <Col span={7} offset={1}>
                    <Select
                      style={{width:  '100%'}}
                      value={item.valueScope ? item.valueScope : undefined}
                      disabled={!isEditing || !item.enabled}
                      placeholder={messages("common.please.select")/*请选择*/}
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                      onSelect={(value, option) => this.handleChangeSystemScope(value, option, costCenterIndex)}
                    >
                      {item.valueScopeList.map(valueItem => {
                        return <Option data-item={valueItem} value={valueItem.viewValue}>{valueItem.viewName}</Option>
                      })}
                    </Select>
                  </Col>
                )}
                {item.type === 1001 && (
                  <Col span={7} offset={1}>
                    <Input
                      placeholder={messages('common.please.enter')}
                      disabled={!isEditing || !item.enabled}
                      value={item.value}
                      onChange={e => this.changeFixedText(e.target.value, costCenterIndex)}
                    />
                  </Col>
                )}
              </Row>
              <div className="supplier-remarks">
                {item.remark}
              </div>
            </div>
          )
        })}
        <div>
          <span className="supplier-module-title">{messages('setting.key686'/*机票*/)}</span>
          {flightConfigList.map(field => {
            return (
              <div key={field.key} className="item-block">
                <div className="title-line">
                  {field.fieldName}:
                </div>
                <Divider dashed/>
                <div>
                  {field.type === 'boolean' && (
                    <RadioGroup
                      name={field.key}
                      disabled={!isEditing}
                      value={field.value}
                      onChange={(e) => this.handleChangeFieldValue(e.target.value, field.key, 'flight')}
                    >
                      <Radio value={true}>{messages("common.yes")/*是*/}</Radio>
                      <Radio value={false}>{messages("common.no")/*否*/}</Radio>
                    </RadioGroup>
                  )}
                  {field.type === 'int' && (
                    <InputNumber
                      size='small'
                      min={0}
                      precision={0}
                      disabled={!isEditing}
                      value={field.value}
                      onChange={(e) => this.handleChangeFieldValue(e, field.key, 'flight')}
                    />
                  )}
                </div>
                <div className="supplier-remarks">
                  {field.remark}
                </div>
              </div>
            )
          })}
          <span className="supplier-module-title">{messages('setting.key707'/*酒店*/)}</span>
          {hotelConfigList.map(field => {
            return (
              <div key={field.key} className="item-block">
                <div className="title-line">
                  {field.fieldName}:
                </div>
                <Divider dashed/>
                <div>
                  {field.type === 'boolean' && (
                    <RadioGroup
                      name={field.key}
                      disabled={!isEditing}
                      value={field.value}
                      onChange={(e) => this.handleChangeFieldValue(e.target.value, field.key, 'hotel')}
                    >
                      <Radio value={true}>{messages("common.yes")/*是*/}</Radio>
                      <Radio value={false}>{messages("common.no")/*否*/}</Radio>
                    </RadioGroup>
                  )}
                  {field.type === 'int' && (
                    <InputNumber
                      size='small'
                      min={0}
                      precision={0}
                      disabled={!isEditing}
                      value={field.value}
                      onChange={(e) => this.handleChangeFieldValue(e, field.key, 'hotel')}
                    />
                  )}
                </div>
                <div className="supplier-remarks">
                  {field.remark}
                </div>
              </div>
            )
          })}
          <span className="supplier-module-title">{messages('setting.key717'/*火车*/)}</span>
          {trainConfigList.map(field => {
            return (
              <div key={field.key} className="item-block">
                <div className="title-line">
                  {field.fieldName}:
                </div>
                <Divider dashed/>
                <div>
                  {field.type === 'boolean' && (
                    <RadioGroup
                      name={field.key}
                      disabled={!isEditing}
                      value={field.value}
                      onChange={(e) => this.handleChangeFieldValue(e.target.value, field.key, 'train')}
                    >
                      <Radio value={true}>{messages("common.yes")/*是*/}</Radio>
                      <Radio value={false}>{messages("common.no")/*否*/}</Radio>
                    </RadioGroup>
                  )}
                  {field.type === 'int' && (
                    <InputNumber
                      size='small'
                      min={0}
                      precision={0}
                      disabled={!isEditing}
                      value={field.value}
                      onChange={(e) => this.handleChangeFieldValue(e, field.key, 'train')}
                    />
                  )}
                </div>
                <div className="supplier-remarks">
                  {field.remark}
                </div>
              </div>
            )
          })}
        </div>
        {!hiding && (
          <div className='form-setting-buttons bottom-bar'>
            {isEditing ?
              <div>
                <Button type='primary' className='buttons-save' loading={saveLoading} onClick={this.onSaveClick}>{messages("common.save")/*保存*/}</Button>
                <Button type='primary' className='buttons-cancelEdit' onClick={this.cancelEditing}>{messages('setting.key667'/*取消编辑*/)}</Button>
                <Button type='default' onClick={() => {
                  this.context.router.push(this.formManagement.url);
                }}>{messages("common.back")/*返回*/}</Button>
              </div>
              :
              <div>
                <Button type='primary' className='buttons-edit' onClick={this.editClicked}>{messages("common.edit")/*编辑*/}</Button>
                <Button type='default' onClick={() => {
                  this.context.router.push(this.formManagement.url);
                }}>{messages("common.back")/*返回*/}</Button>
              </div>
            }
          </div>
        )}
      </div>
    )
  }

}

SupplierManagementV2.contextTypes = {
  router: React.PropTypes.object
};
function mapStateToProps(state) {
  return {
    profile: state.login.profile
  }
}

const wrappedSupplierManagementV2 = Form.create()(SupplierManagementV2);
export default connect(mapStateToProps)(wrappedSupplierManagementV2);
